import React, { useState, useEffect } from 'react';
import marked from 'marked'
import '../static/css/AddArticle.css'
import { Row, Col, Input, Select, Button, DatePicker, message } from 'antd'
import axios from 'axios'
import servicePath from '../api'
import { timeConversion } from '../utils'

const { Option } = Select;
const { TextArea } = Input

marked.setOptions({
    renderer: marked.Renderer(),
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
});

const AddArticle = (props) => {
    const [articleId, setArticleId] = useState('0')  // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
    const [articleTitle, setArticleTitle] = useState('')   //文章标题
    const [articleContent, setArticleContent] = useState('')  //markdown的编辑内容
    const [markdownContent, setMarkdownContent] = useState('预览内容') //html内容
    const [introducemd, setIntroducemd] = useState()            //简介的markdown内容
    const [introducehtml, setIntroducehtml] = useState('等待编辑') //简介的html内容
    const [showDate, setShowDate] = useState()   //发布日期
    const [typeInfo, setTypeInfo] = useState([]) // 文章类别信息
    const [selectedType, setSelectType] = useState('请选择文章类别') //选择的文章类别

    const getTypeInfo = () => {
        return new Promise(resolve => {
            axios({
                method: 'get',
                url: servicePath.getTypeInfo,
                header: { 'Access-Control-Allow-Origin': '*' },
                withCredentials: true
            }).then(res => {
                if (res.data.data === "未登录") {
                    localStorage.removeItem('openId')
                    props.history.push('/login')
                } else {
                    setTypeInfo(res.data.data)
                }
                resolve(true)
            })
        })
    }

    useEffect(() => {
        getTypeInfo()
        //获得文章ID
        let tmpId = props.match.params.id
        if (tmpId) {
            setArticleId(tmpId)
            getArticleById(tmpId)
        }
    }, []) // eslint-disable-line react-hooks/exhaustive-deps

    const changeContent = (e) => {
        setArticleContent(e.target.value)
        let html = marked(e.target.value)
        setMarkdownContent(html)
    }

    const changeIntroduce = (e) => {
        setIntroducemd(e.target.value)
        let html = marked(e.target.value)
        setIntroducehtml(html)
    }

    const selectTypeHandler = (value) => {
        setSelectType(value)
    }

    const getArticleById = (id) => {
        axios(servicePath.getArticleById + id, {
            withCredentials: true,
            header: { 'Access-Control-Allow-Origin': '*' }
        }).then(
            res => {
                console.log(res.data)
                setArticleTitle(res.data.data[0].title)
                setArticleContent(res.data.data[0].article_content)
                let html = marked(res.data.data[0].article_content)
                setMarkdownContent(html)
                setIntroducemd(res.data.data[0].introduce)
                let tmpInt = marked(res.data.data[0].introduce)
                setIntroducehtml(tmpInt)
                setShowDate(timeConversion(res.data.data[0].addTime))
                setSelectType(res.data.data[0].typeId)
            }
        )
    }

    const saveArticle = () => {
        if (!selectedType || selectedType === '请选择文章类别') {
            message.error('必须选择文章类别')
            return false
        }
        if (!articleTitle) {
            message.error('文章名称不能为空')
            return false
        }
        if (!articleContent) {
            message.error('文章内容不能为空')
            return false
        }
        if (!introducemd) {
            message.error('简介不能为空')
            return false
        }
        if (!showDate) {
            message.error('发布日期不能为空')
            return false
        }

        let dataProps = {
            type_id: selectedType,
            title: articleTitle,
            article_content: articleContent,
            introduce: introducemd,
            addTime: showDate
        }
        console.log('articleId=:' + articleId)
        if (articleId === '0') {
            dataProps.view_count = Math.ceil(Math.random() * 100) + 1000
            axios({
                method: 'post',
                url: servicePath.addArticle,
                data: dataProps,
                withCredentials: true
            }).then(res => {
                setArticleId(res.data.insertId)
                if (res.data.insertSuccess) {
                    message.success('文章保存成功')
                } else {
                    message.error('文章保存失败');
                }
            }
            )
        } else {
            dataProps.id = articleId
            axios({
                method: 'post',
                url: servicePath.updateArticle,
                header: { 'Access-Control-Allow-Origin': '*' },
                data: dataProps,
                withCredentials: true
            }).then(
                res => {
                    if (res.data.updateSuccess) {
                        message.success('文章更新成功')
                    } else {
                        message.error('更新失败');
                    }
                }
            )
        }
    }

    return (
        <div>
            <Row gutter={5}>
                <Col span={18}>
                    <Row gutter={10} >
                        <Col span={20}>
                            <Input
                                value={articleTitle}
                                placeholder="博客标题"
                                onChange={e => {
                                    setArticleTitle(e.target.value)
                                }}
                                size="large" />
                        </Col>
                        <Col span={4}>
                            <Select defaultValue={selectedType} value={selectedType} size="large" onChange={selectTypeHandler}>
                                {
                                    typeInfo.map((item, index) => {
                                        return (<Option key={index} value={item.id}>{item.typeName}</Option>)
                                    })
                                }
                            </Select>
                        </Col>
                    </Row>
                    <br />
                    <Row gutter={10} >
                        <Col span={12}>
                            <TextArea
                                className="markdown-content"
                                rows={35}
                                value={articleContent}
                                onChange={changeContent}
                                onPressEnter={changeContent}
                                placeholder="文章内容"
                            />
                        </Col>
                        <Col span={12}>
                            <div className="show-html" dangerouslySetInnerHTML={{ __html: markdownContent }}></div>
                        </Col>
                    </Row>
                </Col>
                <Col span={6}>
                    <Col span={12}>
                        <br /><br /><br />
                        <div className="date-select">
                            <DatePicker
                                onChange={(date, dateString) => setShowDate(dateString)}
                                placeholder="发布日期"
                                size="large"
                            />
                        </div>
                    </Col>
                    <Col span={24}>
                        <br />
                        <TextArea rows={4}
                            value={introducemd}
                            onChange={changeIntroduce}
                            onPressEnter={changeIntroduce} placeholder="文章简介" />
                        <br /><br />
                        <div className="introduce-html" dangerouslySetInnerHTML={{ __html: '文章简介：' + introducehtml }}></div>
                        <br />
                    </Col>
                    <div className="mt10">
                        <Button size="large">暂存文章</Button>
                        <Button className="ml10" type="primary" size="large" onClick={saveArticle}>发布文章</Button>
                    </div>
                </Col>
            </Row>
        </div>
    )
}

export default AddArticle